<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #left>
        <span slot="right" class="iconfont icontiane"></span>天鹅到家
      </template>

      <van-button
        class="search-btn"
        slot="title"
        type="default"
        size="small"
        round
        icon="search"
        to="/search"
      >
        搜索
      </van-button>
      <template #right>
        <span slot="right" class="iconfont icontianqi"></span>13℃-21℃
      </template>
    </van-nav-bar>
    <!-- 导航按钮 -->
    <div class="nav-buttons">
      <a
        class="nav-button"
        :key="index"
        v-for="(item, index) in navList"
        @click="gotoAnther(index)"
      >
        <img :src="item.nav_src" class="nav_img" alt="" />
        {{ item.nav_name }}
      </a>
    </div>
    <!-- 广告区域 -->
    <div class="myad">
      <!-- 轮播图区域 -->
      <van-swipe :autoplay="2000">
        <van-swipe-item
          v-for="(Image, index) in swipeImages"
          :key="index"
          :ad-id="index"
        >
          <img class="swipeimg" v-lazy="Image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 人们广告区域 -->
      <div class="hotad">
        <div class="hotadde" v-for="(item, index) in hotadList" :key="index">
          <h5>{{ item.h3 }}</h5>
          <p>{{ item.p }}</p>
          <img :src="item.src" alt="" />
        </div>
      </div>
    </div>

    <!-- 生活百科 -->
    <van-cell is-link arrow-direction="down" center class="lifecell">
      <template #title>
        <span class="custom-title">生活百科：</span>
      </template>
      <van-swipe :autoplay="1000" vertical :show-indicators="false">
        <van-swipe-item
          v-for="item in articleList"
          :key="item.id"
          @click="toArticle(item.article_classid)"
          ref="articleRecRef"
        >
          <div class="swipe-text">
            {{ item.article_title }}
          </div>
        </van-swipe-item>
      </van-swipe>
    </van-cell>

    <!-- 推建服务 -->
    <div class="rec_service">
      <!-- 推建服务标题 -->
      <div class="rec_title">
        <span style="font-size: 20px">
          <span
            slot="icon"
            class="iconfont iconhuo"
            style="color: #c75e5d; font-size: 20px"
          ></span>
          <strong>推荐服务</strong>
        </span>
        <span style="font-size: 12px; color: #a6a5ad">专业服务 品质保证</span>
      </div>
      <!-- 推建服务内容 -->
      <div class="rec_content">
        <div
          class="content_div"
          v-for="item in recList"
          :key="item.id"
          @click="toGoodDetail(item.id)"
        >
          <div class="content_title">{{ item.rec_title }}</div>
          <img :src="item.rec_src" alt="" />
          <p>{{ item.rec_name }}</p>
          <div class="content_describe">{{ item.rec_describe }}</div>
          <span>{{ item.rec_price }}元起</span>
        </div>
      </div>
    </div>

    <!-- 频道列表 -->
    <van-tabs
      class="channel-tabs"
      v-model="active"
      ref="channelRef"
      animated
      swipeable
    >
      <van-tab
        :title="channel.name"
        v-for="channel in channels"
        :key="channel.id"
      >
        <!-- 文章列表 -->
        <article-list :channel="channel"></article-list>
      </van-tab>
      <div slot="nav-right" class="placeholder"></div>

      <div slot="nav-right" class="hamburger-btn">
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
    <!-- /频道列表 -->

    <!-- 阿姨详情弹出层 -->
    <van-popup
      v-model="isNarryShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    />
  </div>
</template>

<script>
import { getNavlist, getRecList, getArticleList } from "../../api/home";
import ArticleList from "./components/article-list";

export default {
  components: {
    ArticleList,
  },
  data() {
    return {
      navList: [], //主页导航按钮列表
      isNarryShow: false, //阿姨详情弹出层显示
      swipeImages: [
        "https://static.daojia.com/changsha/fe-website-dj-pc/static/images/home/djys-banner.jpg",
        "https://static.daojia.com/changsha/fe-website-dj-pc/static/images/home/hhrzm-banner-new.png",
      ], //轮播图数据列表
      hotadList: [
        {
          h3: "日常保洁",
          p: "洁净爱家 静心舒适",
          src:
            "http://static.daojia.com/changsha/fe-website-dj-pc/static/images/home/pic_class_hot_rcbj.png",
        },
        {
          h3: "搬家·拉货",
          p: "品质保证 价格优惠",
          src:
            "http://static.daojia.com/changsha/fe-website-dj-pc/static/images/home/pic_class_hot_bj.png",
        },
      ],
      recList: [],
      active: 0, //文章频道默认打开
      articleList: [],
      channels: [
        {
          id: 1,
          name: "生活百科",
        },
        {
          id: 2,
          name: "健康生活",
        },
        {
          id: 3,
          name: "宝爸宝妈",
        },
        {
          id: 4,
          name: "家居改造",
        },
      ], //频道列表
    };
  },
  created() {
    this.getNavList();
    this.getRecList();
    this.getArticleList();
  },
  methods: {
    gotoAnther(id) {
      if (id == 0) {
        this.$router.push("/cleaning");
      } else if (id == 1) {
        this.$router.push("/narry-list");
      } else if (id == 2) {
        this.$router.push("/move-house");
      } else if (id == 3) {
        this.$router.push("/pull-cargo");
      } else if (id == 5) {
        this.$router.push("/get-job");
      } else {
        this.isNarryShow = true;
      }
    },
    // 获取导航按钮列表
    async getNavList() {
      const res = await getNavlist();
      this.navList.push(...res);
    },
    async getRecList() {
      const res = await getRecList();
      this.recList.push(...res);
      console.log(this.recList);
    },
    async getArticleList() {
      const res = await getArticleList();
      this.articleList.push(...res);
    },
    toArticle(id) {
      this.active = parseInt(id) - 1;
      document.documentElement.scrollTop = 800;
    },
    async toGoodDetail(id) {
      this.$router.push("/goods_detail/" + id);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.home-container {
  padding-bottom: 55px;
  .van-nav-bar {
    position: fixed;
    background-image: linear-gradient(to right, #e74b4c, #fc8150);
    z-index: 999;
    /deep/.van-nav-bar__left {
      padding-right: 5px;
      color: white;
      font-size: 12px;
    }
    /deep/.search-btn {
      width: 200px;
      height: 30px;
      border: none;
      font-size: 12px;
      .van-icon {
        font-size: 12px;
        font-weight: 800;
        color: #e74b4c;
      }
    }
    /deep/.van-nav-bar__right {
      padding-right: 5px;
      color: white;
      font-size: 10px;
    }
  }
  .nav-buttons {
    display: flex;
    padding-top: 50px;
    background-color: #fff;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 10px;
    a {
      width: 33.3%;
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 14px;
      color: black;
      padding-top: 10px;
      .nav_img {
        width: 50px;
        border-radius: 50%;
        margin: 0 auto;
      }
    }
  }
  van-swipe-item {
    width: 100%;
  }
  .swipeimg {
    width: 100%;
  }
  .myad {
    background-color: #fff;
  }
  .hotad {
    display: flex;
    justify-content: space-around;
    // flex-wrap: wrap;
    padding-bottom: 5px;
    .hotadde {
      width: 170px;
      height: 170px;
      position: relative;
      img {
        position: absolute;
        top: 0;
        width: 100%;
      }
      h5 {
        position: absolute;
        z-index: 3;
        font-size: 16px;
        top: 5px;
        left: 50px;
        margin: 0;
      }
      p {
        position: absolute;
        top: 15px;
        left: 35px;
        font-size: 12px;
        z-index: 2;
      }
    }
  }
  /deep/.lifecell {
    display: unset;
    display: flex;
    .van-swipe {
      height: 30px;
      line-height: 30px;
    }
    .van-cell__title {
      flex: 1;
    }
    .van-cell__value {
      flex: 3;
    }
  }
  /deep/.swipe-text {
    white-space: nowrap;
    width: 220px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .rec_service {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 0 5px;
    .rec_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
    }
    .rec_content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .content_div {
        width: 48%;
        height: 160px;
        margin: 2px;
        position: relative;
        background-color: #fff;
        .content_title {
          position: absolute;
          top: 3px;
          left: -1;
          background-color: #fad292;
          color: #5d2a10;
          z-index: 1;
          font-size: 10px;
          border-radius: 0 10px 10px 0;
          padding-right: 5px;
        }
        img {
          width: 100%;
          height: 100px;
          position: absolute;
          top: 0;
        }
        p {
          position: absolute;
          top: 100px;
          margin: 0;
          font-size: 16px;
          font-weight: 800;
          z-index: 2;
        }
        .content_describe {
          position: absolute;
          top: 124px;
          color: #b1b1b1;
          font-size: 10px;
          z-index: 3;
        }
        span {
          position: absolute;
          top: 141px;
          font-size: 14px;
          color: #d96766;
          span {
            z-index: 3;
          }
        }
      }
    }
  }
}

/deep/ .channel-tabs {
  .van-tabs__wrap {
    height: 40px;
  }

  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 25%;
    font-size: 16px;
    color: #333333;
  }

  .van-tab--active {
    color: #f55347;
  }

  .van-tabs__nav {
    padding-bottom: 0;
  }

  .van-tabs__line {
    bottom: 3px;
    width: 23% !important;
    height: 4px;
    background-color: #f55347;
  }

  .placeholder {
    flex-shrink: 0;
    width: 66px;
    height: 82px;
  }
}
</style>
